<section class="pop_bg">
    <div class="pop_cont">
        <!--title-->
        <h3>弹出提示标题</h3>
        <!--content-->
        <div class="pop_cont_input">
            <ul>
                <li>
                    <span>标题</span>
                    <input type="text" placeholder="定义提示语..." class="textbox"/>
                </li>
                <li>
                    <span class="ttl">城市</span>
                    <select class="select">
                        <option>选择省份</option>
                    </select>
                    <select class="select">
                        <option>选择城市</option>
                    </select>
                    <select class="select">
                        <option>选择区/县</option>
                    </select>
                </li>
                <li>
                    <span class="ttl">地址</span>
                    <input type="text" placeholder="定义提示语..." class="textbox"/>
                </li>
                <li>
                    <span class="ttl">地址</span>
                    <textarea class="textarea" style="height:50px;width:80%;"></textarea>
                </li>
                
            </ul>
        </div>
        <!--以pop_cont_text分界-->
        <div class="pop_cont_text">
        这里是文字性提示信息！
        </div>
        <!--bottom:operate->button-->
        <div class="btm_btn">
            <input type="button" value="确认" class="input_btn trueBtn"/>
            <input type="button" value="关闭" class="input_btn falseBtn"/>
        </div>
    </div>
</section>
<!--结束：弹出框效果-->
<section>
    <h2><strong style="color:grey;">常用按钮（水平块元素，无区域限制）</strong></h2>
    <a class="link_btn" id="loading">点击加载</a>
    <button class="link_btn" id="showPopTxt">测试弹出框</button>
    <input type="button" value="按钮input" class="link_btn"/>
</section>
<section>
    <h2>
        <strong style="color:grey;">表单样式（组合）</strong>
    </h2>
    <input type="text" class="textbox" placeholder="默认宽度"/>
    <input type="text" class="textbox textbox_295" placeholder="class=295px..."/>
    <input type="text" class="textbox textbox_225" placeholder="class=225px..."/>
    <select class="select">
        <option>下拉菜单</option>
        <option>菜单1</option>
    </select>
    <input type="button" value="组合按钮" class="group_btn"/>
</section>
<section>
    <h2>
        <strong style="color:grey;">页面标题及表格/分页（根据具体情况列入重点，切勿放置可扩展内容不定的数据）</strong>
    </h2>
    <div class="page_title">
        <h2 class="fl">例如产品详情标题</h2>
        <a class="fr top_rt_btn">右侧按钮</a>
    </div>
    <table class="table">
        <tr>
            <th>项目1</th>
            <th>项目2</th>
            <th>项目3</th>
            <th>项目4</th>
            <th>项目5</th>
            <th>项目6</th>
            <th>项目7</th>
        </tr>
        <tr>
            <td style="width:265px;"><div class="cut_title ellipsis">265px宽·长标题字符串截取，仅适合单行截取，多行截取程序定义一下。</div></td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
            <td>内容五</td>
            <td>内容六</td>
            <td>
                <a href="#">表内链接</a>
                <a href="#" class="inner_btn">表内按钮</a>
            </td>
        </tr>
        <tr>
            <td style="width:265px;"><div class="cut_title ellipsis">265px宽·长标题字符串截取，仅适合单行截取，多行截取程序定义一下。</div></td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
            <td>内容五</td>
            <td>内容六</td>
            <td>
                <a href="#">表内链接</a>
                <a href="#" class="inner_btn">表内按钮</a>
            </td>
        </tr>
        <tr>
            <td style="width:265px;"><div class="cut_title ellipsis">265px宽·长标题字符串截取，仅适合单行截取，多行截取程序定义一下。</div></td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
            <td>内容五</td>
            <td>内容六</td>
            <td>
                <a href="#">表内链接</a>
                <a href="#" class="inner_btn">表内按钮</a>
            </td>
        </tr>
    </table>
    <aside class="paging">
        <a>第一页</a>
        <a>1</a>
        <a>2</a>
        <a>3</a>
        <a>…</a>
        <a>1004</a>
        <a>最后一页</a>
    </aside>
</section>
<section>
    <h2>
        <strong style="color:grey;">分列内容布局</strong>
    </h2>
    <ul class="ulColumn2">
        <li>
            <span class="item_name" style="width:120px;">输入框：</span>
            <input type="text" class="textbox textbox_295" placeholder="文本信息提示..."/>
            <span class="errorTips">错误提示信息...</span>
        </li>
        <li>
            <span class="item_name" style="width:120px;">下拉框：</span>
            <select class="select">
                <option>选择品牌</option>
                <option>品牌1</option>
                <option>品牌2</option>
            </select>
            <span class="errorTips">错误提示信息...</span>
        </li>
        <li>
            <span class="item_name" style="width:120px;">移动开关：</span>
            <!--<label class="single_selection"><input type="radio" name="name"/>推荐</label>
            <label class="single_selection"><input type="radio" name="name"/>不推荐</label>-->
            <input type="checkbox" id="checkbox_c1" class="chk_3" /><label for="checkbox_c1"><input type="hidden" name="test" value="0"/></label>
            <input type="checkbox" id="checkbox_c2" class="chk_3" checked /><label for="checkbox_c2"><input type="hidden" name="test" value="0"/></label>
            <!--<input type="checkbox" id="checkbox_d2" class="chk_4" checked /><label for="checkbox_d2"></label>-->
        </li>
        <li>
            <span class="item_name" style="width:120px;">单选：</span>
            <input type="radio" name="danxuan" id="checkbox_a4" class="chk_1" checked /><label for="checkbox_a4"></label>
		    <input type="radio" name="danxuan" id="checkbox_a5" class="chk_1" /><label for="checkbox_a5"></label>
            <input type="radio" name="danxuan" id="checkbox_a6" class="chk_1" /><label for="checkbox_a6"></label>
        </li>
        <li>
            <span class="item_name" style="width:120px;">复选：</span>
            <input type="checkbox" id="checkbox_a1" class="chk_1" checked /><label for="checkbox_a1"></label>
		    <input type="checkbox" id="checkbox_a2" class="chk_1" /><label for="checkbox_a2"></label>
            <input type="checkbox" id="checkbox_a3" class="chk_1" /><label for="checkbox_a3"></label>
        </li>
        <li>
            <span class="item_name" style="width:120px;">单按钮：</span>
            <input type="checkbox" id="checkbox_b1" class="chk_2" /><label for="checkbox_b1">我同意<input type="hidden" name="test" value="0"/></label>
        </li>
        <li>
            <span class="item_name" style="width:120px;">开启和关闭：</span>
            <input type="checkbox" id="checkbox_d1" class="chk_4" />
            <label for="checkbox_d1">
                <input type="hidden" name="test" value="0"/>
            </label>
            
            <input type="checkbox" id="checkbox_d2" class="chk_4" checked />
            <label for="checkbox_d2">
                <input type="hidden" name="test" value="1"/>
            </label>
            
        </li>
        <li>
            <span class="item_name" style="width:120px;">摘要：</span>
            <textarea placeholder="摘要信息" class="textarea" style="width:500px;height:100px;"></textarea>
        </li>
        <li>
            <span class="item_name" style="width:120px;">上传图片：</span>
            <label class="uploadImg">
                <input type="file"/>
                <span>上传图片</span>
            </label>
        </li>
        <li>
            <span class="item_name" style="width:120px;"></span>
            <input type="submit" class="link_btn"/>
        </li>
    </ul>
</section>
<!--tabStyle-->

<section>
    <ul class="admin_tab">
        <li><a class="active">自定义标题</a></li>
        <li><a>自定义标题</a></li>
        <li><a>...可追加</a></li>
    </ul>
    <!--tabCont-->
    <div class="admin_tab_cont" style="display:block;">添加时，对其增加一个父级，tabContent01子项无样式，具体情况单独定义。</div>
    <div class="admin_tab_cont">tabContent02，内容根据具体数据二次单独定义，公共样式单独调用</div>
    <div class="admin_tab_cont">可追加</div>
</section>
<section>
    <ul class="admin_tab">
        <li><a class="active">自定义标题</a></li>
        <li><a>自定义标题</a></li>
        <li><a>...可追加</a></li>
    </ul>
    <!--tabCont-->
    <div class="admin_tab_cont" style="display:block;">
        <!--左右分栏：左侧栏目-->
        <div class="cont_col_lt mCustomScrollbar" style="height:500px;width:20%">
            <table class="table fl">
                <tr>
                    <th>角色</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td class="center">顶级管理员</td>
                    <td class="center"><a class="inner_btn">DeathGhost</a></td>
                </tr>
                <tr>
                    <td class="center">采购人员</td>
                    <td class="center"><a class="inner_btn">DeathGhost</a></td>
                </tr>
            </table>
            <table class="table fl" style="margin-top:8px;">
                <tr>
                    <th>角色</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td class="center">顶级管理员</td>
                    <td class="center"><a class="inner_btn">DeathGhost</a></td>
                </tr>
                <tr>
                    <td class="center">采购人员</td>
                    <td class="center"><a class="inner_btn">DeathGhost</a></td>
                </tr>
            </table>
        </div>
        <!--左右分栏：右侧栏-->
        <div class="cont_col_rt" style="width: 80%;">
            <table class="table fl">
                <tr>
                    <th>资源</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td class="center">测试</td>
                    <td>数据信息过多（扩展性太大），不建议使用此布局，以免数据溢出。</td>
                    <td class="center"><a class="inner_btn">DeathGhost</a></td>
                </tr>
                <tr>
                    <td class="center">测试</td>
                    <td>数据信息过多（扩展性太大），不建议使用此布局，以免数据溢出。</td>
                    <td class="center"><a class="inner_btn">DeathGhost</a></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="admin_tab_cont">tabContent02，内容根据具体数据二次单独定义，公共样式单独调用</div>
    <div class="admin_tab_cont">可追加</div>
</section>
<script>
$(function(){
    admin.help();
})
</script>